<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <script type="text/javascript" src="%1/node_modules/viewerjs/dist/viewer.js"></script>
        <link rel="stylesheet" href="%1/node_modules/viewerjs/dist/viewer.css" />

        <style>
         html, body {
             width: 100%;
             height: 100%;
             padding: 0;
             margin: 0;
             background: %3;
         }

         img {
             display: none;
             background: %3;
         }

         .viewer-fullscreen, .viewer-fullscreen-exit {
             display: none;
         }
        </style>
    </head>
    <body>
        <div>
            <img id="image" src="%2">
        </div>

        <script type="text/javascript">
         // View an image
         const viewer = new Viewer(document.getElementById('image'), {
             inline: true,
             navbar: false,
             transition: false,
             toolbar: {
                 zoomIn: 4,
                 zoomOut: 4,
                 oneToOne: 4,
                 reset: 4,
                 rotateLeft: 4,
                 rotateRight: 4,
                 flipHorizontal: 4,
                 flipVertical: 4,
             },
             view() {
                 viewer.full();
             },
         });

         function rotate_left() {
             viewer.rotate(-90);
         }

         function rotate_right() {
             viewer.rotate(90);
         }

         function zoom_out() {
             viewer.zoom(-0.1, true);
         }

         function zoom_in() {
             viewer.zoom(0.1, true);
         }

         function zoom_reset() {
             viewer.reset();
         }

         function zoom_toggle() {
             viewer.toggle();
         }

         function flip_horizontal() {
             viewer.scaleX(-viewer.imageData.scaleX || -1);
         }

         function flip_vertical() {
             viewer.scaleY(-viewer.imageData.scaleY || -1);
         }

         function move_left() {
             viewer.move(-10, 0);
         }

         function move_right() {
             viewer.move(10, 0);
         }

         function move_up() {
             viewer.move(0, -10);
         }

         function move_down() {
             viewer.move(0, 10);
         }
        </script>
    </body>
</html>
